<template>
    <div>
        <el-dialog
            :width="store.$state.alerttitle == '考勤设置' ? '950' : store.$state.alerttitle == '定薪' || '调薪' ? '700' : ''"
            destroy-on-close v-model="store.$state.dialogVisible" :title="store.$state.alerttitle">
            <span>
                <div v-if="store.$state.alerttitle == '分配角色'" style="padding: 20px 0px;">
                    <ruleinfo />
                </div>
                <div v-if="store.$state.alerttitle == '分配权限'" style="padding: 20px 0px;">
                    <assign :permIdsArr="permIdsArr" :render="render" />
                </div>
                <div v-if="store.$state.alerttitle == '定薪'">
                    <Salarystable :userId="userId" />
                </div>
                <div v-if="store.$state.alerttitle == '调薪'">
                    <Modifytable :userdata="userdata" />
                </div>
                <div v-if="store.$state.alerttitle == '考勤设置'">
                    <Attendanceset />
                </div>
                <div v-if="store.$state.alerttitle == '群发通知'" style="padding: 20px 0px;">
                    <messageMuch />
                </div>
                <div v-if="store.$state.alerttitle == 'excel导入'">
                    <el-upload class="upload-demo" :auto-upload="false" drag @change="unloads" accept=".xlsx">
                        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                        <div @click.stop="downexcel" style="margin-bottom: 15px">
                            下载导入模板
                        </div>
                        <div class="el-upload__text">
                            将文件拖到此处或<em>点击上传</em>
                        </div>
                    </el-upload>
                    <el-button @click="store.$state.dialogVisible = false">取消</el-button>
                </div>
            </span>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useStore } from '@/stores/counter'
import ruleinfo from './rule/ruleinfo.vue';
import assign from './rule/assign.vue';
import Salarystable from '@/components/Wages/Salarystable.vue';
import Modifytable from '@/components/Wages/Modifytable.vue';
import Attendanceset from '@/components/Attendance/attendanceset.vue'
import messageMuch from '@/components/staff/messageMuch.vue'
import { UploadFilled } from '@element-plus/icons-vue'
import { downloadStaff, importStaff } from '@/api/staff'
import { ElMessage } from 'element-plus'
const store = useStore()
// import XLSX from 'xlsx'
let files = new FormData()
defineProps(['permIdsArr', 'render', 'userId', 'userdata'])
const unloads = (file: any) => {
    importStaff(file.raw).then(res => {
        if (res.data.success) {
            ElMessage.success(res.data.message)
            store.$state.dialogVisible = false
        } else {
            ElMessage.error(res.data.message)
        }
    })
}
const downexcel = () => {
    downloadStaff().then(res => {
        let blob = new Blob([res.data], {
            type: 'application/vnd.ms-excel;charset=UTF-8'
        })
        let elm = document.createElement('a')
        //创建下载的链接
        elm.setAttribute('download', '员工导入模板.xlsx')
        let href = window.URL.createObjectURL(blob)
        elm.href = href
        document.body.appendChild(elm)
        elm.click()
        //下载完成移除元素
        document.body.removeChild(elm)
        //释放掉blob对象
        window.URL.revokeObjectURL(href)
    })
}
</script>

<style scoped></style>